<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>定时获取地震数据</title>
    <style>
        #log {
            background-color: #333;
            color: #fff;
            padding: 10px;
            margin-top: 10px;
            border-radius: 5px;
            overflow-y: auto;
            max-height: 200px;
        }
    </style>
    <script>
        // 定义全局对象
        let gp_object = {
            did: '',
            depth: '',
            lon: '',
            lat: '',
            location: '',
            scale: '',
            time: ''
        };
        let result = [];
        let index = 1;
        let inn = 0;

        // 获取数据
        function getData(page = 1, index = null) {
            let url = 'https://api.wolfx.jp/cenc_eqlist.json';
            let params = {};

            // 请求
            let response;
            fetch(url, {method: 'GET', params})
                .then(res => {
                    response = res;
                    return res.json();
                })
                .then(json_object => {
                    // 处理数据
                    console.log(json_object['No1']);

                    for (let i = 50; i > 1; i--) {
                        let item = json_object['No' + i];
                        gp_object.depth = item.depth;
                        gp_object.lon = item.longitude;
                        gp_object.lat = item.latitude;
                        gp_object.scale = item.magnitude;
                        gp_object.location = item.location;
                        gp_object.time = item.time;
                        let did = item.EventID.split('.');
                        gp_object.did = did[0] + did[1];
                        setData(JSON.stringify(gp_object));
                    }

                    // 更新log元素
                    let logElement = document.getElementById('log');
                    logElement.innerHTML += `请求时间：${new Date().toLocaleString()}，状态码：${response.status}，次数：${inn}<br>`;
                })
                .catch(error => {
                    console.error('Error:', error);
                    response = undefined;
                });


        }

        // 设置数据
        function setData(gp) {
            let url = 'http://127.0.0.1:8089/gp';
            let headers = {'Content-Type': 'application/json'};
            fetch(url, {method: 'POST', body: gp, headers})
                .then(response => {
                    // 处理返回的状态码
                    console.log(response.status);
                    let logElement = document.getElementById('log');
                    logElement.innerHTML += `返回状态码：${response.status}<br>`;
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }

        // 主函数
        function main() {
            getData();
            inn++;
            document.getElementById('sp').innerText = inn;

        }

        // 定时运行main方法
        function runMain() {
            let interval = document.getElementById('interval').value;
            document.getElementById('time').innerText = new Date().toLocaleString();
            setInterval(main, interval * 1000);
        }
    </script>
</head>
<body>
    <h1>定时获取地震数据</h1>
    <label for="interval">请输入定时运行时间（秒）：</label>
    <input type="number" id="interval" name="interval">
    <button onclick="runMain()">开始定时运行</button>
    <p>开始运行时间：<span id="time"></span></p>
    <p>一共运行次数：<span id="sp"></span></p>
    <div id="log"></div>
</body>
</html>
